import { useState } from 'react'
import { Button, Flex, Input, Form, Space } from 'antd'
import style from './Create.module.scss'
import { Create } from '../../../service/index-roleList'

// 接口类型
interface props  {
  setGetData: () => void;
}

const CreatePart = ({ setGetData }: props) => {


  const [maskShow, setMaskShow] = useState(false); // 新增角色时遮罩层显示状态
  const [form] = Form.useForm();

  const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  };

  const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
  };


  // 新增角色弹窗
  const onFinish = (values: any) => {
    interface values {
      name: string;
      value: string;
    }
    const data: values = {
      name: values.name,
      value: values.value
    }

    Create(data)

    setGetData();

    form.resetFields();
  };

  return (
    <div>
      <Flex gap="small" wrap>
        <Button type="primary" className={style.addBtn} onClick={() => {
          setMaskShow(true)
        }}>新增角色</Button>
      </Flex>
      <div className={style.mask} style={{ display: maskShow ? 'flex' : 'none' }} >
        <Form
          {...layout}
          form={form}
          name="control-hooks"
          onFinish={onFinish}
          style={{ maxWidth: 600 }}
          className={style.form}
        >
          <Form.Item name="name" label="角色" rules={[{ required: true }]}>
            <Input onChange={(e) => console.log(e.target.value)} />
          </Form.Item>
          <Form.Item name="value" label="角色关键字" rules={[{ required: true }]}>
            <Input />
          </Form.Item>

          <Form.Item
            noStyle
            shouldUpdate={(prevValues, currentValues) => prevValues.gender !== currentValues.gender}
          >
            {({ getFieldValue }) =>
              getFieldValue('gender') === 'other' ? (
                <Form.Item name="customizeGender" label="Customize Gender" rules={[{ required: true }]}>
                  <Input />
                </Form.Item>
              ) : null
            }
          </Form.Item>
          <Form.Item {...tailLayout}>
            <Space>
              <Button type="primary" htmlType="submit" onClick={() => setMaskShow(false)}>
                确认
              </Button>
              <Button htmlType="button" onClick={() => setMaskShow(false)}>
                取消
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}

export default CreatePart